<!--
  *********************物流项目三组************************
*  功能描述：货主合同管理
*  作者：郭辉
*  时间：2022-01-10
*  修改人：郭辉
*  修改时间：2022-01-10
*********************物流项目三组************************
-->

<template>
  <div>
    <!--物资采购添加-->
    <div>
      <el-dialog title="物资采购" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-form-item label="货物名称" prop="Materials_Name">
            <el-input
              style="width: 80%"
              v-model="ruleForm.Materials_Name"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="Materials_Type">
            <el-select v-model="ruleForm.Materials_Type" placeholder="请选择">
              <el-option
                v-for="item in optionsss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材质" prop="Materials_IPS">
            <el-select v-model="ruleForm.Materials_IPS" placeholder="请选择">
              <el-option
                v-for="items in optionss"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格" prop="Materials_Specification">
            <el-input
              style="width: 80%"
              v-model="ruleForm.Materials_Specification"
            ></el-input>
          </el-form-item>
          <el-form-item label="产地" prop="Materials_Country">
            <el-select
              v-model="ruleForm.Materials_Country"
              placeholder="请选择活动区域"
              tyle="width: 80%"
              @change="binb"
            >
              <el-option label="请选择国家" :value="0"></el-option>
              <div v-for="(obj, index) in this.country" :key="index">
                <el-option
                  :label="obj.ProductionPlace_Name"
                  :value="obj.Id"
                ></el-option>
              </div>
            </el-select>
            <el-select
              v-model="ruleForm.Materials_Province"
              placeholder="请选择活动区域"
              tyle="width: 80%"
            >
              <el-option label="请选择城市" :value="0"></el-option>
              <div v-for="(obj, index) in this.countrys" :key="index">
                <el-option
                  :label="obj.ProductionPlace_Name"
                  :value="obj.Id"
                ></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="Materials_Num">
            <el-input-number
              v-model="ruleForm.Materials_Num"
              :min="0"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="期望交付日期" prop="Materials_Expectation">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.Materials_Expectation"
              style="width: 80%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用途描述" prop="Materials_Use">
            <el-input
              type="textarea"
              v-model="ruleForm.Materials_Use"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="Materials_Remark">
            <el-input
              type="textarea"
              v-model="ruleForm.Materials_Remark"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交审批</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!--物资采购编辑-->
    <div>
      <el-dialog title="物资采购" :visible.sync="dialogFormVisibles">
        <el-form
          :model="ruleForms"
          :rules="rules"
          ref="ruleForms"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-form-item label="货物名称" prop="Materials_Name">
            <el-input
              style="width: 80%"
              v-model="ruleForms.Materials_Name"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="Materials_Type">
            <el-select v-model="ruleForms.Materials_Type" placeholder="请选择">
              <el-option
                v-for="item in optionsss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材质" prop="Materials_IPS">
            <el-select v-model="ruleForms.Materials_IPS" placeholder="请选择">
              <el-option
                v-for="items in optionss"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格" prop="Materials_Specification">
            <el-input
              style="width: 80%"
              v-model="ruleForms.Materials_Specification"
            ></el-input>
          </el-form-item>
          <el-form-item label="产地" prop="Materials_Country">
            <el-select
              v-model="ruleForms.Materials_Country"
              placeholder="请选择活动区域"
              tyle="width: 80%"
              @change="binb"
            >
              <el-option label="请选择国家" :value="0"></el-option>
              <div v-for="(obj, index) in this.country" :key="index">
                <el-option
                  :label="obj.ProductionPlace_Name"
                  :value="obj.Id"
                ></el-option>
              </div>
            </el-select>
            <el-select
              v-model="ruleForms.Materials_Province"
              placeholder="请选择活动区域"
              tyle="width: 80%"
            >
              <el-option label="请选择城市" :value="0"></el-option>
              <div v-for="(obj, index) in this.countrys" :key="index">
                <el-option
                  :label="obj.ProductionPlace_Name"
                  :value="obj.Id"
                ></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="Materials_Num">
            <el-input-number
              v-model="ruleForms.Materials_Num"
              :min="0"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="期望交付日期" prop="Materials_Expectation">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForms.Materials_Expectation"
              style="width: 80%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用途描述" prop="Materials_Use">
            <el-input
              type="textarea"
              v-model="ruleForms.Materials_Use"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="Materials_Remark">
            <el-input
              type="textarea"
              v-model="ruleForms.Materials_Remark"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="upds('ruleForms')"
              >提交审批</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!--物资采购查看-->
    <div>
      <el-dialog title="物资采购" :visible.sync="dialogFormVisibled">
        <el-form
          :model="ruleForms"
          :rules="rules"
          ref="ruleForms"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-form-item label="货物名称" prop="Materials_Name">
            <el-input
              style="width: 80%"
              v-model="ruleForms.Materials_Name"
              readonly="readonly"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="Materials_Type">
            <el-select
              v-model="ruleForms.Materials_Type"
              placeholder="请选择"
              readonly="readonly"
            >
              <el-option
                v-for="item in optionsss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材质" prop="Materials_IPS">
            <el-select
              v-model="ruleForms.Materials_IPS"
              placeholder="请选择"
              readonly="readonly"
            >
              <el-option
                v-for="items in optionss"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格" prop="Materials_Specification">
            <el-input
              style="width: 80%"
              v-model="ruleForms.Materials_Specification"
              readonly="readonly"
            ></el-input>
          </el-form-item>
          <el-form-item label="产地" prop="Materials_Country">
            <el-select
              v-model="ruleForms.Materials_Country"
              placeholder="请选择活动区域"
              tyle="width: 80%"
              @change="binb"
              readonly="readonly"
            >
              <el-option label="请选择国家" :value="0"></el-option>
              <div v-for="(obj, index) in this.country" :key="index">
                <el-option
                  :label="obj.ProductionPlace_Name"
                  :value="obj.Id"
                ></el-option>
              </div>
            </el-select>
            <el-select
              v-model="ruleForms.Materials_Province"
              placeholder="请选择活动区域"
              tyle="width: 80%"
              readonly="readonly"
            >
              <el-option label="请选择城市" :value="0"></el-option>
              <div v-for="(obj, index) in this.countrys" :key="index">
                <el-option
                  :label="obj.ProductionPlace_Name"
                  :value="obj.Id"
                ></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="Materials_Num">
            <el-input-number
              v-model="ruleForms.Materials_Num"
              :min="0"
              label="描述文字"
              readonly="readonly"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="期望交付日期"
            prop="Materials_Expectation"
            readonly="readonly"
          >
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForms.Materials_Expectation"
              style="width: 80%"
              readonly="readonly"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用途描述" prop="Materials_Use">
            <el-input
              type="textarea"
              v-model="ruleForms.Materials_Use"
              readonly="readonly"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="Materials_Remark">
            <el-input
              type="textarea"
              v-model="ruleForms.Materials_Remark"
              readonly="readonly"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <el-row :gutter="20">
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          货物名称<el-input
            v-model="MaterialsName"
            placeholder="请输入内容"
            style="width: 70%"
          ></el-input></div
      ></el-col>
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          材质<el-select v-model="MaterialsIPS" placeholder="请选择">
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          产地<el-input
            v-model="productionPlace_PName"
            placeholder="请输入内容"
            style="width: 67%"
          ></el-input></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          申请人<el-input
            v-model="pName"
            placeholder="请输入内容"
            style="width: 70%"
          ></el-input></div
      ></el-col>
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          审批状态：
          <el-select v-model="MaterialsState" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-search" @click="show"
            >查询</el-button
          >
          <el-button class="el-icon-back">重置</el-button>
        </div></el-col
      >
    </el-row>

    <el-button type="primary" @click="kai">新增</el-button>
    <el-button type="primary" @click="dels">删除</el-button>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="Materials_Name" label="货物名称" width="180">
      </el-table-column>
      <el-table-column prop="Materials_Type" label="类型" width="100">
        <template slot-scope="scope">
          <span v-show="scope.row.Materials_Type == 1">车辆用品</span>
          <span v-show="scope.row.Materials_Type == 2">办公用品</span>
        </template>
      </el-table-column>
      <el-table-column prop="Materials_IPS" label="材质" width="100">
        <template slot-scope="scope">
          <span v-show="scope.row.Materials_IPS == 1">金属</span>
          <span v-show="scope.row.Materials_IPS == 2">橡胶</span>
          <span v-show="scope.row.Materials_IPS == 3">塑料</span>
          <span v-show="scope.row.Materials_IPS == 4">液体</span>
        </template>
      </el-table-column>
      <el-table-column prop="Materials_Specification" label="规格" width="100">
      </el-table-column>
      <el-table-column prop="ProductionPlace_PName" label="产地" width="100">
      </el-table-column>
      <el-table-column prop="Materials_Num" label="数量" width="100">
      </el-table-column>
      <el-table-column prop="Materials_Use" label="用途描述" width="120">
      </el-table-column>
      <el-table-column prop="Employees_Name" label="申请人" width="100">
      </el-table-column>
      <el-table-column
        prop="Materials_Expectation"
        label="期望交付日期"
        width="100"
      >
      </el-table-column>
      <el-table-column prop="CreateDate" label="创建时间" width="100">
      </el-table-column>
      <el-table-column prop="Materials_State" label="审批状态" width="100">
        <template slot-scope="scope">
          <span v-show="scope.row.Materials_State == 1">待提交</span>
          <span v-show="scope.row.Materials_State == 2">掉审批</span>
          <span v-show="scope.row.Materials_State == 3">已拒绝</span>
          <span v-show="scope.row.Materials_State == 4">已通过</span>
        </template>
      </el-table-column>
      <el-table-column prop="-" label="审批人" width="100"> </el-table-column>
      <el-table-column label="操作" fixed="right" width="310">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="eidt(scope.$index, scope.row)"
            >查看</el-button
          >
          <span v-show="scope.row.Materials_State == 1">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >提假审批</el-button
            >
          </span>
          <span v-show="scope.row.Materials_State == 2"> </span>
          <span v-show="scope.row.Materials_State == 3">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >重新审批</el-button
            >
          </span>
          <span v-show="scope.row.Materials_State == 4"> </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalcount"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 0,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      options: [
        {
          value: 0,
          label: "请选择",
        },
        {
          value: 1,
          label: "待提交",
        },
        {
          value: 2,
          label: "待审批",
        },
        {
          value: 3,
          label: "已拒绝",
        },
        {
          value: 4,
          label: "已通过",
        },
      ],
      optionss: [
        {
          value: 0,
          label: "请选择",
        },
        {
          value: 1,
          label: "金属",
        },
        {
          value: 2,
          label: "橡胶",
        },
        {
          value: 3,
          label: "塑料",
        },
        {
          value: 4,
          label: "液体",
        },
      ],
      optionsss: [
        {
          value: 0,
          label: "请选择",
        },
        {
          value: 1,
          label: "车辆用品",
        },
        {
          value: 2,
          label: "办公用品",
        },
      ],
      value: "",
      input: "",
      value1: "",
      tableData: [],
      multipleSelection: [],
      pageindex: 1,
      pagesize: 5,
      totalcount: 0,
      MaterialsName: "",
      MaterialsIPS: 0,
      productionPlace_PName: "",
      pName: "",
      MaterialsState: 0,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      ruleForm: {
        Materials_Country: 0,
        Materials_Province: 0,
        PeopleId: "29fbc795-aa87-4414-bb0c-3f405ebcc3c1",
      },
      ruleForms: {},
      ids: [],
      rules: {
        Materials_Name: [
          { required: true, message: "请填写货物名称", trigger: "blur" },
        ],
        Materials_Specification: [
          { required: true, message: "请填写规格", trigger: "change" },
        ],
        Materials_Type: [
          { required: true, message: "请填写类型", trigger: "change" },
        ],
        Materials_IPS: [
          { required: true, message: "请填写材质", trigger: "change" },
        ],
        Materials_Num: [
          { required: true, message: "请填写数量", trigger: "change" },
        ],
        Contract_balance: [
          { required: true, message: "请输入包车金额", trigger: "change" },
        ],
        Contract_AttentionLine: [
          { required: true, message: "请输入经办人", trigger: "change" },
        ],
      },
      dialogFormVisibles: false,
      country: [],
      countrys: [],
      dialogFormVisibled: false,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.show();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.show();
    },
    kai() {
      this.dialogFormVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "https://localhost:44360/api/app/t-mS_Procurement/procurement",
              this.ruleForm
            )
            .then((res) => {
              if (res.data == 1) {
                alert("添加成功!");
                this.dialogFormVisible = false;
                this.show();
              } else {
                alert("添加失败!");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    show() {
      this.$axios
        .get(
          "https://localhost:44360/api/app/t-mS_Procurement/procurement?MaterialsName=" +
            this.MaterialsName +
            "&MaterialsIPS=" +
            this.MaterialsIPS +
            "&productionPlace_PName=" +
            this.productionPlace_PName +
            "&pName=" +
            this.pName +
            "&MaterialsState=" +
            this.MaterialsState +
            "&pageindex=" +
            this.pageindex +
            "&pagesize=" +
            this.pagesize +
            ""
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // for (index = 1; i <= this.multipleSelection.length; index++) {
      //   this.ids.push(this.multipleSelection[index].Contract_Id);
      // }
    },
    eidt(index, row) {
      this.dialogFormVisibled = true;
      this.ruleForms = row;
      this.ruleForm.Materials_Country = row.Materials_Country;
      this.a = row.Materials_Province;
      this.binb();
    },
    handleEdit(index, row) {
      this.dialogFormVisibles = true;

      this.ruleForms = row;
      this.ruleForm.Materials_Country = row.Materials_Country;
      this.a = row.Materials_Province;
      this.binb();
    },
    upds() {
      this.$axios
        .put(
          "https://localhost:44360/api/app/t-mS_Procurement/procurement",
          this.ruleForms
        )
        .then((res) => {
          if (res.data == 1) {
            alert("修改成功!");
            this.dialogFormVisibles = false;
            this.show();
          } else {
            alert("修改失败!");
            this.dialogFormVisibles = false;
          }
        });
    },
    dels() {
      this.ids = this.multipleSelection.map((item) => item.Materials_Id).join();
      if (confirm("确定要删除选中的数据吗?")) {
        this.$axios
          .delete(
            "https://localhost:44360/api/app/t-mS_Procurement/s-contracts?ids=" +
              this.ids
          )
          .then((res) => {
            if (res.data == 1) {
              alert("删除成功!");
              this.show();
            }
          });
      }
    },
    handleDelete(index, row) {
      if (confirm("确定删除此条数据吗?")) {
        this.$axios
          .delete(
            "https://localhost:44360/api/app/t-mS_Procurement/" +
              row.Materials_Id +
              "/contracts"
          )
          .then((res) => {
            if (res.data == 1) {
              alert("删除成功!");
              this.show();
            }
          });
      }
    },
    bina() {
      this.$axios
        .get("https://localhost:44360/api/app/t-mS_Place/0/place")
        .then((res) => {
          this.country = res.data.PageData;
        });
    },
    binb() {
      this.$axios
        .get(
          "https://localhost:44360/api/app/t-mS_Place/" +
            this.ruleForm.Materials_Country +
            "/place"
        )
        .then((res) => {
          this.countrys = res.data.PageData;
          if (this.a != 0) {
            this.ruleForms.Materials_Province = Number(this.a);
          }
          this.a = 0;
        });
    },
  },
  created() {
    this.show();
    this.bina();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  background: #ffffff;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>